<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        left: 0;
        position: absolute;
        background: red;
        /* animation: 2s ani; */
        transition: all 2s;
      }
      @keyframes ani {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      //一、 触摸事件
      //1. touchstart 触摸开始
      document.ontouchstart = function () {
        console.log("开始触摸");
      };

      // // 2.touchmove :触摸中触发；
      document.ontouchmove = function () {
        console.log("触摸中");
      };

      // // 3.touchend ：触摸结束
      document.ontouchend = function () {
        console.log("触摸结束");
      };

      // 二、其他事件
      // 1.过度结束触发 ；transitionend
      // var boxEle = document.querySelector(".box");
      // boxEle.onclick = function () {
      //   this.style.left = "300px";
      // };
      // // 监听过度结束的事件；
      // boxEle.ontransitionend = function () {
      //   console.log("transition完");
      // };

      // 2.动画结束；animationend
      //   var boxEle = document.querySelector(".box");
      //   boxEle.onanimationend = function () {
      //     console.log("动画结束");
      //   };
    </script>
  </body>
</html>
